<!DOCTYPE html>
<html  lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="layui/css/layui.css"/>
		<link rel="stylesheet" href="layui/css/admin.css"/>
		<link rel="stylesheet" href="layui/css/modules/layer/default/layer.css" />
		
		<style type="text/css">
		  .card{
		     height:135px;
		  }
		</style>
	</head>
	<body class="layui-layout-body" layadmin-themealias="green">
		<div class="layui-fluid">
			<div class="layui-row layui-col-space15">
					<div class="layui-row layui-col-space15">
					<!-- 
						<div class="layui-col-md4">
							<div class="layui-card">
								<div class="layui-card-header">待办事项</div>
								<div class="layui-card-body">
									<div class="layui-carousel layadmin-carousel layadmin-shortcut layadmin-backlog" 
										style="width: 100%;height: 100px;" lay-arrow="none" lay-indicator="inside"lay-anim="">
									  <div carousel-item="">
									  	<ul class="layui-row layui-col-space10 layui-this">
									  		<li class="layui-col-xs6">
									  			<a class="layadmin-backlog-body" lay-href="#">
									  				<h2>待批假期</h2>
									  				<p><cite>44</cite></p>
									  			</a>
									  		</li>
									  		<li class="layui-col-xs6">
									  			<a class="layadmin-backlog-body" lay-href="#">
									  				<h2>待批假期</h2>
									  			    <p><cite>565</cite></p>
									  			</a>
									  			
									  		</li>
									  	</ul>
									  	<ul class="layui-row layui-col-space10">
									  		<li class="layui-col-xs3">
									  			<a href="#">待审人员</a>
									  		</li>
									  	</ul>
									  </div>
									  <div class="layui-carousel-ind">
									  	<ul>
									  		<li class="layui-this"></li>
									  		<li class=""></li>
									  	</ul>
									  </div>
									  <button class=" layui-icon layui-carousel-arrow" lay-type="sub"></button>
									  <button class="layui-icon layui-carousel-arrow" lay-type="add"></button>
									</div>
								</div>
							</div>
						</div>
						 -->
						<div class="layui-col-md4" >
							<div class="layui-card">
								<div class="layui-card-header">快捷入口</div>
								<div class="layui-card-body">
									<div class="layui-carousel layadmin-carousel layadmin-shortcut layadmin-backlog card" 
										lay-arrow="none" lay-indicator="inside"lay-anim="">
									  <div carousel-item="">
									  	<ul class="layui-row layui-col-space10 layui-this">
									  		<li class="layui-col-xs4">
									  			<a class="layadmin-backlog-body" onclick="attention()" lay-href="">
									  			    <i class="layui-icon">&#xe667;</i>
									  				<h2>发布通知</h2>
									  				<p><cite></cite></p>
									  			</a>
									  		</li>
									  		
									  		<li class="layui-col-xs4">
									  			<a class="layadmin-backlog-body" onclick="setWorkTime()" lay-href="">
									  			    <i class="layui-icon">&#xe716;</i>
									  				<h2>工作时间设置</h2>
									  				<p><cite></cite></p>
									  			</a>
									  		</li>
									  		
									  		<li class="layui-col-xs4" style="line-height:36px">
									  			<a class="layadmin-backlog-body" href="/toVacateAgree">
									  	
									  				<h2>待批假期</h2>
									  			    <p><cite><span th:text="${vacateCount}"></span></cite></p>
									  			</a>
									  			
									  		</li>
									  	</ul>
									
									  </div>
								
									</div>
								</div>
							</div>
						</div>
						
									 
								</div> 
							</div>
						</div>
						<div class="layui-col-md12">
							<div class="layui-card">
								<div class="layui-card-header">部门信息</div>
								<div class="layui-card-body">
									<table id="depInfo" lay-filter="depInfo"></table>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
	
		
 
        <script type="text/html" id="attentionLayer">
         <div>
          <form class="layui-form">
             <div class="layui-form-item">
               <label class="layui-form-label">标题</label>
               <div class="layui-input-block">
                 <input class="layui-input" id="title" name="title"  type="text" placeholder="请输入标题">
               </div>
             </div>
             <div class="layui-form-item layui-form-text">
               <label class="layui-form-label">正文</label>
               <div class="layui-input-block">
                 <textarea class="layui-textarea" id="msg" name="msg" placeholder="请输入内容"></textarea>
               </div>
             </div>
             <div class="layui-form-item">
               <label class="layui-form-label">发布日期</label>
               <div class="layui-input-inline">
                 <input class="layui-input" id="date" name="date"  type="text">
               </div>
             </div>
          </form>
         </div>
        </script>
        <script type="text/html" id="workTimeLayer">
          <form class="layui-form">
             <div class="layui-form-item">
               <label class="layui-form-label">上班时间</label>
               <div class="layui-input-inline">
                 <input class="layui-input" id="start" name="start" type="text">
               </div>
             </div>
             <div class="layui-form-item">
               <label class="layui-form-label">下班时间</label>
               <div class="layui-input-inline">
                 <input class="layui-input" id="end" name="end" type="text">
               </div>
             </div>
          </form>
        </script>
		<script src="layui/layui.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
		<script th:inline="none">
		layui.use('table',function(){
			  var table=layui.table;
			  var $=layui.jquery;
			  
			  table.render({
					 elem:'#depInfo',
					 url:'/getDepInfo',
					 method:'post',
				   //  toolbar:'#toolbar',
				     defaultToolbar:['filter','exports','print',{title:'提示',layEvent:'LAYTABLE_TIPS',icon:'layui-icon-tips'}],
				     title:'部门表',
				     cols:[[

				    	 {field:'id',title:'ID',fixed:'left',unresize:true,sort:true},
				    	 {field:'depNo',title:'部门号',sort:true},

				    	 {field:'depName', title:'部门名称',sort: true}
				    	 ,{field:'empNum', title:'部门人数'},
			    	
				     ]],
				     page:true
				     
				  });
  
			  //监听行工具事件
			  table.on('tool(test)',function(obj){		
			  });
		  });
		//监听通知事件
		function attention(){
			layui.use('layer',function(){
				var layer=layui.layer;
				var $=layui.jquery;						
							var index=layer.open({
								formType:1,
								title:'发布通知',
								content:$('#attentionLayer').html(),
								btn:['确定','取消'],
								area:['450px','350px'],
								yes:function(){
									var title=$('#title').val();
									var msg=$('#msg').val();
									var date=$('#date').val();
									$.ajax({
										url:'/addAttention',
										method:'post',
										contentType:"application/json;charset=utf-8",
										data:JSON.stringify({title:title,msg:msg,date:date}),
										success:function(msg){
											if(msg){
												layer.msg("发布成功");
											}else{
												layer.msg("发布失败");
											}
										},
										error:function(){
											layer.msg("发布失败");
										}
									});
								},
								btn2:function(index){
									layer.close(index);
								},
								success:function(){
									layui.use('laydate',function(){
										var laydate=layui.laydate;
										laydate.render({
											elem:'#date',
											type:'date',
										});
									});
								},
							});
			});
		}
		
	
		//监听设置工作时间事件
		function setWorkTime(){
			layui.use('layer',function(){
				var layer=layui.layer;
				var $=layui.jquery;
							var index=layer.open({
								formType:1,
								title:'设置工作时间',
								content:$('#workTimeLayer').html(),
								btn:['确认','取消'],
								area:['380px','220px'],
								offset:'80px',
								yes:function(){
									var start=$('#start').val();
									var end=$('#end').val();
									$.ajax({
										url:'/editWorkTime',
										method:'post',
										contentType:"application/json;charset=utf-8",
										data:JSON.stringify({start:start,end:end}),
										success:function(msg){
											if(msg){
												layer.msg("设置成功");
											}else{
												layer.msg("设置失败,请检查时间是否合法");
											}
										},
										error:function(){
											layer.msg("设置失败");
										}										
									});
								},
								btn2:function(index){
									layer.close(index);
								},
								success:function(){
									layui.use('laydate',function(){
										var laydate=layui.laydate;
										laydate.render({
											elem:'#start',
											type:'time',
										});
										laydate.render({
											elem:'#end',
											type:'time',
										});
									});
								},
							});
						});
		}	
		
		//图表js
		var ctx=document.getElementById("myChart").getContext("2d");
		var ctxdata = {
	            labels: ["20-25", "25-30", "30-35", "35-40", "40-45", "45以上"],
	            datasets: [
	            {
	            label: "员工年龄图表",
	            fillColor: "rgba(220,220,220,0.5)",
	            strokeColor: "rgba(220,220,220,0.8)",
	            highlightFill: "rgba(220,220,220,0.75)",
	            highlightStroke: "rgba(220,220,220,1)",
	            data: [2, 2, 3, 1, 1, 2],
	            backgroundColor:['#388E3C','#388E3C','#388E3C','#388E3C','#388E3C','#388E3C','#388E3C']
	            },
	            ],
	            };
		var myBarChart = new Chart(ctx,{
			type:'bar',
			data:ctxdata,
			options:{
				scales:{
					yAxes:[{
						ticks:{
							stepSize:2
						}
					}]
				}
			}
			});
		</script>
		
	</body>
</html>
